<template>
  <div id="app">
    <!-- :key="$route.fullPath"  解决路由缓存问题 ---》路径相同但是参数不同的问题 -->

    <!-- 添加动画 -->
    <!-- <transition :name="transitionName"> -->
    <router-view :key="$route.fullPath"></router-view>
    <!-- </transition> -->
    <main-tab-bar v-if="show"></main-tab-bar>
  </div>
</template>

<script>
import mainTabBar from 'components/content/tabbar/mainTabBar'
import 'vant/lib/index.css';
export default {
  name: 'App',
  data() {
    return {
      show: true,
      transitionName: ''
    }
  },
  components: {
    mainTabBar
  },
  watch: {
    $route(to, form) {
      let id = to.params.id
      // to 跳转到哪里去  form 从哪里来
      if (to.path == '/login' || to.path == "/register" || to.path == "/profile" || to.path == `/product/${id}` || to.path == `/detail/${id}` || to.path == '/proxy') {
        this.show = false
      }
      else {
        this.show = true
      }
    }
  },
  created() {
    if (window.sessionStorage.getItem('token')) {
      this.getCartInfo()
    }

  },
  mounted() {


  },
  methods: {
    async getCartInfo() {
      const res = await this.$require({
        url: '/cart/list',
        method: 'get'
      })

      if (res.status == 0) {
        this.cartList = res.data
        // 给购物车添加默认的没有选中的属性
        let cartInfo = []

        res.data.forEach(item => {
          cartInfo.push({
            id: item.productId,
            count: item.count,
            price: item.price,
            isChecked: false
          })
        })
        // 将数据保存在store中

        this.$store.dispatch('saveCartInfo', cartInfo)

      }
    },

  },
  // watch: {
  //   $route(to, from) {
  //     if (to.meta.index > from.meta.index) { //外---》内
  //       this.transitionName = 'slide-left'
  //     } else if (to.meta.index < from.meta.index) { //内---》外
  //       this.transitionName = 'slide-right'
  //     } else {
  //       this.transitionName = '' //同级 无过渡效果
  //     }
  //   }

  // }

}
</script>

<style lang="scss">
@import url("assets/libs/iconfont.css");
@import url("assets/scss/reset.scss");

#app {
  width: 100%;
  max-width: 800px;
  height: 100%;
  margin: 0 auto;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left: 0;
  top: 0;
}

/*切换样式出错处理*/
.router-view {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

/*切换动画*/
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
